<template>
  <div>
    <a-modal :maskClosable="false" :keyboard="false" :closable="false" v-model="visible" title="通行" :footer="null">
      <div class="content">
        <img :src="imgSrc" class="login-logo" />
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getApplyInfo, createQRCode } from '@/api/meet'
export default {
  name: 'QRCode',
  data () {
    return {
      visible: true,
      params: {},
      meetInfo: {},
      imgSrc: ''
    }
  },
  created () {
    this.params = this.$route.query
  },
  mounted () {
    this.getApplyInfo()
  },
  methods: {
    // 获取预约信息
    getApplyInfo () {
      let params = {
        applyId: this.params.applyId,
        memberId: this.params.memberId
      }
      getApplyInfo(params).then(res => {
        if (res.code === 0) {
          this.meetInfo = res.data
          this.createQRCode(res.data.meetingTitle)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 生成会议二维码
    createQRCode (meetingTitle) {
      let params = {
        applyId: this.params.code,
        meetingTitle
      }
      let data = Object.assign(params)
      createQRCode(data).then(res => {
        let url = window.URL.createObjectURL(res)
        this.imgSrc = url
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-modal-header {
  text-align: center;
  .ant-modal-title {
    font-size: 16px;
    font-weight: 500;
  }
}

.content {
  text-align: center;
  .login-logo {
    width: 220px;
    height: 220px;
  }
}
@media (max-width: 767px) {
  /deep/ .ant-modal {
    width: 80% !important;
  }
}
</style>
